<template>
  <div style="padding: 10px" class="experPage">

    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"
          :label-width="96">
      <div class="form-gourp">
        <span class="form-title">基础信息</span>
        <FormItem label="工程" prop="projectId">
          <Select filterable v-model="formValidate.projectId"
                  filterable
                  placeholder="请选择工程"
                  label-in-value
                  @on-change="getPrjName">
            <Option v-for="item in prjlists" :value="item.id" :key="item.id" :title="item.name" :label="item.name">
                    {{item.name}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="工程场景" prop="id">
          <Select filterable v-model="formValidate.id" filterable placeholder="请选择场景" label-in-value
                  @on-change="getTestName">
            <Option v-for="item in testList" :value="item.id" :key="item.id" :label="item.name" :title="item.name">
              {{ item.name }}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model.trim="formValidate.name"
                 placeholder="请输入中文、数字、字母、英文括号、下划线或者中划线，名称长度为1-64个字符"
                 :maxlength="64"></Input>
        </FormItem>
        <FormItem label="描述" prop="description">
          <Input v-model.trim="formValidate.description" type="textarea" :maxlength="200"
                 :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入描述"></Input>
        </FormItem>
        <FormItem label="时间" prop="Dates">
          <DatePicker :editable="false" type="datetimerange" :value="formValidate.Dates"
                      format="yyyy-MM-dd HH:mm" placement="bottom-start" confirm ref="datePicker"
                      placeholder="选择日期" style="width: 280px" transfer :options="disabledOptions"
                      @on-ok="clickOkBtn"
                      @on-clear="clickClearBtn"
                      @on-open-change="switchOpenChange" @on-change="changeDates">
          </DatePicker>

          <p style="color:#ff9900;font-size:10px;line-height: 2;">
            <Icon type="ios-information-circle-outline"/>
            选择同一天的时间段请双击要选择的日期
          </p>
          <p style="color:#ff9900;font-size:10px;line-height: 2;">
            <Icon type="ios-information-circle-outline"/>
            开始时间不能小于当前时间
          </p>
          <p style="color:#ff9900;font-size:10px;line-height: 2;">
            <Icon type="ios-information-circle-outline"/>
            建议提前四小时配置环境
          </p>
        </FormItem>

        <FormItem label="图片" prop="logo">
          <section>
            <Row>
              <Upload ref="upload"
                      :action="uploadAction"
                      :show-upload-list="false"
                      :format="['jpg','jpeg','png']"
                      :on-format-error="handleFormatError"
                      :on-success="getImageUrl"
                      :headers="uploadHeader"
              >
                <Button icon="ios-cloud-upload-outline">上传图片</Button>
                <img :src="iconSrc"
                     style="width:auto;height:40px;margin-left: 30px;vertical-align: middle;"
                     v-if="formValidate.iconPath"/>
                <span style="color:#f90; position: absolute; top: 30px; left: 0;"> <Icon
                  type="ios-information-circle-outline"/>支持jpg,jpeg,png格式图片</span>
              </Upload>
              <p v-if="showTip" style="color:red; position: relative; top: 24px;">请上传jpg,jpeg,png格式图片</p>
              <div class="ivu-form-item-error-tip" v-if="uploaderror">请上传图片</div>
            </Row>
          </section>
        </FormItem>
      </div>

      <div class="form-gourp">

        <span class="form-title">演练模式</span>
        <!--渗透演练、综合演练、夺旗赛需要设置提交报告模式-->
        <FormItem label="提交报告模式" prop="wpUpMode" >
          <RadioGroup v-model="formValidate.wpUpMode">
            <Radio :label=1 >针对演练提交</Radio>
            <Radio :label=2 >针对任务提交</Radio>

          </RadioGroup>
        </FormItem>
        <!--综合演练需要设置是否分布式模式-->
        <FormItem label="是否为分布式" prop="isDistributed" v-if="$store.state.common.showDistributed">
          <RadioGroup v-model="formValidate.isDistributed" @on-change="changeIsDistributed">
            <Radio :label=1 >是</Radio>
            <Radio :label=0 >否</Radio>
          </RadioGroup>
        </FormItem>

        <!--渗透演练或综合演练需要设置答题模式-->
        <FormItem label="答题模式" prop="stMode" >
          <RadioGroup v-model="formValidate.stMode">
            <Radio :label=1 >随意答题</Radio>
            <Radio :label=0 >顺序答题</Radio>
          </RadioGroup>
        </FormItem>

      </div>

      <div class="dashboard-detail-body">
        <div class="align-right">
          <Button type="default" @click="closeDialog">取消</Button>
          <Button type="primary" @click="saveScene('formValidate')">确定</Button>
        </div>
      </div>

    </Form>


  </div>

</template>
<script>
import {bindPro, addYellowWhiteRelation,createComplexExericeTeam} from '@/api/new-exper.js'
import { addScene, getTests, getProjects,} from '@/api/drill_compete'

import encryption from '@/libs/encryption.js'
import recoverTime from "@/mixin/recoverTime";
import { parseJson, debounce } from '@/libs/utils'
import { validateName } from '@/libs/reg'

export default {
  name: 'multdrill',
  props: ['taskid', 'bindPprojectId'],
  mixins:[recoverTime],
  data() {

    let September = sessionStorage.getItem('November')
    September = JSON.parse(encryption.SelfUseDecrypt(September));
    const validateTargetScore = (rule,value,callback) => {
      if (value) {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入整数'));
        } else {
          if (value < 0) {
            callback(new Error('请输入正数'));
          } else {
            callback()
          }
        }
      } else {
        callback(new Error('不能为空'));
      }
    }

    const validateNum = (rule, value, callback) => {
      let reg = new RegExp("^[0-9]{1,3}$");
      if (value || value === 0) {
        if (!reg.test(value)) {
          callback(new Error('请输入1-1000的整数'));
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    const validateNum100000 = (rule, value, callback) => {
      if (value !== 0 && !value) {
        callback(new Error('不能为空'))
        return
      }
      if (!Number.isInteger(value)) {
        callback(new Error('请输入整数'))
        return
      }
      if (value <= 0 || value > 100000) {
        callback(new Error('请输入1-100000的整数'));
        return
      }
      callback()
    }
    const validateNum10 = (rule, value, callback) => {
      if (value !== 0 && !value) {
        callback(new Error('不能为空'))
        return
      }
      if (!Number.isInteger(value)) {
        callback(new Error('请输入整数'))
        return
      }
      if (value <= 0 || value > 10) {
        callback(new Error('请输入1-10的整数'));
        return
      }
      callback()
    }
    const validateNum1000 = (rule, value, callback) => {
      if (value !== 0 && !value) {
        callback(new Error('不能为空'))
        return
      }
      if (!Number.isInteger(value)) {
        callback(new Error('请输入整数'))
        return
      }
      if (value <= 0 || value > 1000) {
        callback(new Error('请输入1-1000的整数'));
        return
      }
      callback()
    }
    // 验证时间选择是否正确
    const validateDate = (rule, value, callback) => {
      if (value) {
        let startTime = this.formValidate.Dates[0]
        let endTime = this.formValidate.Dates[1]
        if (!startTime || !endTime) {
          callback(new Error('请选择时间'));
        } else if (new Date(startTime).getTime() < new Date().getTime()) {
          callback(new Error('开始时间必须大于当前时间'));
        } else if ((this.type == 0 || this.type == 1 || this.type == 8) && (new Date(endTime).getTime() - new Date(startTime).getTime() > 7 * 24 * 60 * 60 * 1000)) {
          callback(new Error('最长时间间隔为一周'));
        } else if (new Date(endTime).getTime() - new Date(startTime).getTime() < 60 * 60 * 1000) {
          callback(new Error('起止时间最小间隔一个小时'));
        } else {
          callback()
        }
      } else {
        callback()
      }
    }


    return {
      type: 7,

      showTip: false,
      uploaderror: false,
      prjlists: [],
      testList: [], //工程下的场景列表

      sceneModal: {
        show: false,
        title: '创建场景',
        loading: true,
        type: 1,
        width: 600
      },

      formValidate: {
        high: 5,
        middle: 3,
        low: 1,
        'networkModel': 'lan', // 默认内网
        'createType': '1',
        "cycleTime": this.type == 8 ? 20 : 5,
        "description": "",
        "endTime": "",
        "extension": "",
        "iconPath": "",
        "id": "",
        "name": "",
        "progress": 0,  // 0.准备中、1.准备完毕、2.开始中、3.裁判评判阶段、4.结束、5.暂停、6.删除中、7.删除失败
        "projectId": "",
        "projectName": "",
        "startTime": "",
        "status": 1, //0 ：不启用 1：启用
        "type": 7, //0.对抗演练、1.攻防赛、2夺旗赛、3知识赛、4渗透演练、7综合演练
        "Dates": [],
        "stMode": 0,
        "wpUpMode": 1,
        "isDistributed": 0,
        'hlConfig': 0,//新对抗
        "isMainRange": 1,
        "targetScore": 5000,
        "cycleScore": this.type == 8 || this.hlConfig == 2 ? 100 : 10,
        "basicScore": 5000,
        "enResetNum": 3,
        "resetLostScore": 100,
        "onlineMode": 0,
        "outsideGatewayIP": '', //网关ip
        "outsideIP": '', //外网ip
        "isBlindPlay": 0,
        "touchType": 1,
        "deployMode": 2,
        "hwChangeIp": '0',
        "isBasicScore": 0,
        "oneScore": 100,
        "basicDeduction": 10,
        "isExtraCredit": 0,
        "isSupergroup": 0,
        "isAllowApplicationPrompt": this.type !== 8 ? 1 : 0,
        "ExtraCreditValue1": 6,
        "ExtraCreditValue2": 4,
        "ExtraCreditValue3": 2,
        "ExtraCreditValue4": 1,
        "ExtraCredit1": 1,
        "ExtraCredit2": 1,
        "ExtraCredit3": 1,
        "ctfDeduction": 20
      },
      ruleValidate: {
        createType: [
          {required: true, message: '不能为空', trigger: 'change, blur'}
        ],
        id: [
          {required: true, message: '不能为空', trigger: 'change, blur'}
        ],
        name: [
          {required: true, message: '不能为空', trigger: 'change, blur',},
          {validator: validateName, trigger: 'change, blur'}
        ],
        projectId: [
          {required: true, message: '不能为空', trigger: 'change, blur'}
        ],
        progress: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        type: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        Dates: [
          {required: true, type: 'array', message: '不能为空', trigger: 'change, blur'},
          {validator: validateDate, trigger: 'change, blur'}
        ],
        cycleTime: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        cycleScore: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum1000, trigger: 'change, blur'}
        ],
        basicScore: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum100000, trigger: 'change, blur'}
        ],
        enResetNum: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum10, trigger: 'change, blur'}
        ],
        resetLostScore: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum1000, trigger: 'change, blur'}
        ],
        stMode: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        wpUpMode: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        isDistributed: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        isMainRange: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        targetScore: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateTargetScore, trigger: 'change, blur'}
        ],
        onlineMode: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        networkModel: [
          {required: true, type: 'string', message: '不能为空', trigger: 'change, blur'}
        ],
        isBlindPlay: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        touchType: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        deployMode: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        hwChangeIp: [
          {required: true, message: '不能为空', trigger: 'change, blur'}
        ],
        isBasicScore: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        oneScore: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        basicDeduction: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        isExtraCredit: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        isSupergroup: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        isAllowApplicationPrompt: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'}
        ],
        outsideGatewayIP: [
          {required: true, message: '不能为空', trigger: 'change, blur'},
        ],
        publicSubnetId: [
          {required: true, message: '不能为空', trigger: 'change, blur'}
        ],
        ExtraCreditValue1: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        ExtraCreditValue2: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        ExtraCreditValue3: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        ExtraCreditValue4: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change'},
          {validator: validateNum, trigger: 'change'}
        ],
        ExtraCredit1: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        ExtraCredit2: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        ExtraCredit3: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
        ctfDeduction: [
          {required: true, type: 'number', message: '不能为空', trigger: 'change, blur'},
          {validator: validateNum, trigger: 'change, blur'}
        ],
      },

      uploadAction: "/api/minio/upload/permanent?visibility=company&type=images&bucket=images",//"/api/ftp/edu-ftp/upload/" +  September.userId,
      uploadHeader: {
        Authorization: localStorage.token,
        Accept: '*/*'
      },
      iconSrc: '',


      disabledOptions: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },

    }
  },

  created(){

    this.getPrjList()

  },

  methods:{

    closeDialog() {
      this.$emit('closePopup')
    },

    // 获取工程列表
    getPrjList() {

      let params = {};
      params.pageIndex = 1;
      params.pageSize = 2147483647;
      params.status = 3;
      params.enableAll = true;
      getProjects(params).then(data => {
        if (data.code == 1) {
          if (this.bindPprojectId === undefined || this.bindPprojectId === null || this.bindPprojectId ==='') {
            this.prjlists = data.data.items;
          }else {  // 如果绑定的工程id有值，则只显示和工程Id相同的工程
            console.log("接收到的taskid= " + this.taskid + " , prjId= " + this.bindPprojectId)
            this.prjlists = data.data.items.filter(item =>item.id === this.bindPprojectId)
          }

        } else {
          this.$Message.error(data.message);
        }
      })
    },

    // 转义场景类型
    filterSceneType(type) {
      switch (type) {
        case 0:
          return 'red_and_blue_confrontation'
        case 1:
          return 'offense_and_defense'
        case 8:
          return 'offense_and_defense_plus'
        case 2:
          return 'capture_the_flag'
        case 4:
          return 'break_through'
        case 5:
          return 'protect_network_exercise'
        case 7:
          return 'multiple'
        case 9:
          return 'operation_and_maintenance'
        default:
          return "other"
      }
    },
    // 查询工程对应的工程场景
    getPrjSceneList(projectId) {
      console.log("-----------------查询工程对应的工程场景---------------------------------：" + projectId)
      if (projectId) {
        let params = {
          pageIndex: 1,
          pageSize: 2147483647,
          projectId: projectId
        };
       // let type = this.filterSceneType(this.type);
        let type = this.filterSceneType(7); // 综合演练，固定为7
        getTests(params).then(data => {
          console.log("-----------------查询工程对应的工程场景, 查到了,工程列表，过滤后如下---------------------------------：")
          // 过滤掉不同类型并且不可用的场景
          this.testList = data.data.items.filter(item => item.type == type && item.enabled);
          console.log(this.testList)
          // 对抗演练、综合演练名称已经设置过，这里不再设置
          if (this.testList.length > 0) {
            this.formValidate.id = this.testList[0].id;
            if (this.sceneModal.type == '1' && ![0, 7].includes(this.type)) { // 创建时需要设置名字，修改时不允许修改工程，所以名称也不需要修改
              // 创建非对抗演练、综合演练的演练、竞赛时，设置场景名称为自己的名称
              this.formValidate.name = this.testList[0].name;
            }
          } else {
            this.formValidate.id = '';
            if (![0, 7].includes(this.type)) {
              this.formValidate.name = '';
            }
          }
        })
      }
    },


    // 切换工程时，将工程名称同步为工程的名称，同时查询工程关联的工程场景
    getPrjName(prjInfo) {
      if (prjInfo) {
        this.formValidate.id = '';
        this.formValidate.projectName = prjInfo.label;
        if ([0, 7].includes(this.type)) { // 对抗演练、综合演练直接使用工程的名称，其他类型演练、竞赛名称需要查询场景工程后设置
          this.formValidate.name = prjInfo.label;
        }
        // 查询工程场景
        this.getPrjSceneList(prjInfo.value);
      }
    },
    // 切换工程场景时，设置名称为对应的场景名称
    getTestName(testInfo) {
      if (testInfo && this.type != 0) {
        this.formValidate.name = testInfo.label;
      }
    },

    changeIsDistributed(val){
      if(val==1){
        this.formValidate.stMode=0
        console.log(val,111111111);
        this.stMode=true
      } else{
        this.stMode=false
      }
    },

    // 保存演练、竞赛数据，分为创建、修改两种模式
    saveScene(name) {
      console.log("开始创建综合演练" + name)
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log("创建综合演练,校验通过---" + valid)
          let data = JSON.parse(JSON.stringify(this.formValidate));
          if (!data.startTime || !data.endTime) {
            this.$Message.error('请选择时间!');
            this.cancelLoading(this.sceneModal);
            return;
          }
          if (new Date(data.startTime).getTime() < new Date().getTime()) {
            this.$Message.error('表单输入有误，开始时间不能小于当前时间!');
            this.cancelLoading(this.sceneModal);
            return;
          }
          if (new Date(data.startTime).getTime() > new Date(data.endTime).getTime()) {
            this.$Message.error('表单输入有误，开始时间不能大于结束时间!');
            this.cancelLoading(this.sceneModal);
            return;
          }
          delete data.Dates;
          let obj = {}

          if (this.type === 7) { // 综合演练
            console.log("进入到了综合演练创建1111111111")
            obj = {
              stMode: data.stMode,
              wpUpMode: data.wpUpMode,
              isDistributed:data.isDistributed,
              isMainRange :data.isDistributed === 1 ?data.isMainRange : undefined,
            }
          }
          let extension = parseJson(this.formValidate.extension)
          extension = Object.assign(extension, obj) // 将改动后的值覆盖之前的内容
          data.extension = JSON.stringify(extension) // 将数据转义成字符并保存在扩展字段中
          if (this.sceneModal.type == '1') { // 添加场景
            console.log("进入到了综合演练创建1111111111添加场景")
            this.addScene(data);
          } else if (this.sceneModal.type == "2") { // 修改场景
            console.log("进入到了综合演练创建1111111111修改场景")
            this.modifyScene(data.id, data);
          }

        } else {
          this.$Message.error('表单输入有误，请查看页面信息后重新输入!');
          this.cancelLoading(this.sceneModal);
        }
      })
    },

    // 创建综合演练
    addScene(data) {
      addScene(data).then(res => {
        if (res.code === 1) {
          this.handleReset('formValidate');
          this.sceneModal.show = false;
          this.$Message.info('创建综合演练成功');
         // this.refreshSceneList() //创建完成清空查询条件并回到第一页
          // 创建成功后需要绑定 任务的工程和场景
          console.log("-------------create 综合演练成功--------,输入数据如下")
          console.log(res)
          let params = {
            projectId: data.projectId,
            projectName: data.projectName,
            contestId: res.data,
            taskId: this.taskid,
          };
          console.log("---------------create 综合演练 成功后，绑定任务的project和contest参数")
          console.log(params)
          bindPro(params)

          let drTaskRelation = {
            taskId: this.taskid,
            sceneId: res.data,
            proejctId: data.projectId
          }

          // 添加竞赛与黄方系统任务的关系
          addYellowWhiteRelation(drTaskRelation)

          // 黄方构建综合演练试验团队
          createComplexExericeTeam(this.taskid)

          this.$emit('closePopup')

        } else {
          this.cancelLoading(this.sceneModal);
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.cancelLoading(this.sceneModal);
        this.$Message.error('创建场景失败，请检查网络设置')
      })
    },

    // 刷新表单数据
    handleReset(name) {
      this.$refs[name].resetFields();
      this.iconSrc = '';
      this.formValidate.iconPath = '';
    },

    // 图片上传异常时，显示图片的格式要求
    handleFormatError() {
      this.showTip = true;
    },

    // 上传图片成功后的回调函数，获取图片上传后的保存的位置，用于回显图片
    getImageUrl(res) {
      this.showTip = false;
      if (res.code == 1) {
        let src = res.data;
        this.uploaderror = false;
        this.formValidate.iconPath = src;
        this.iconSrc = `/Learn${src}`;
      } else {
        this.$Message.error('文件上传失败');
      }
    },

    // 刷新操作，清空搜索条件并重新获取数据
    refreshSceneList() {
      this.querySceneInfo = Object.assign(this.querySceneInfo, {
        pageIndex: 1,
        order: 'desc',
        sortBy: 'createTime',
        progress: 'all',
        name: '',
        type: this.type
      })
      this.createByMe = false;
     // this.getSceneList()
    },

    // 取消loading状态
    cancelLoading(modal) {
      modal.loading = false;
      setTimeout(() => {
        modal.loading = true;
      })
    },

  },

  computed: {
    // 是否属于攻防赛、渗透演练、护网演练，这三种类型使用的是场景而非工程（不再有竞赛、演练类型使用场景工程）
    showScene() {
      return [].includes(this.type)
    }
  },

}
</script>
<style scoped>

.score-div {
  display: flex;
}
.score-div>div {
  display: flex;
  margin-left: 10px;
}
.score-div>div:first-child {
  margin-left: 0;
}
.score-div>div>span {
  display: inline-block;
  width: 40px;
}
.pageWrap {
  margin: 30px;
  background: #fff;
  height: calc(100vh - 60px);
  border-radius: 10px;
}

.pageHeader {
  padding: 20px 20px 0 20px;
}

.pageHeader .title {
  float: left;
  font-size: 18px;
}

.fixedHeightTable {
  margin: 20px 20px 0 20px;
}

.levelConfig {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  margin-left: -30px;
}

.levelConfig /deep/ .ivu-input-group-prepend {
  background-color: #1563C2  !important;
  border-color: #1563C2  !important;
  color: #fff;
}

.levelConfig /deep/ .ivu-form-item {
  margin-bottom: 10px;
}

.levelConfig /deep/ .levelConfig-label {
  float: left;
  text-align: center;
  background-color: rgb(56 , 56, 211)!important;
  border-color: rgb(56 , 56, 211)!important;
  color:#fff;
  border-radius: 4px 0 0 4px;
}
.levelConfig /deep/ .levelConfig-label-small {
  width: 50px;
}
.levelConfig /deep/ .levelConfig-label-long {
  width: 74px;
}
.levelConfig /deep/ .levelConfig-label+.ivu-input-number {
  border-radius: 0 4px 4px 0;
  margin-top: -2px;
}
.levelConfig /deep/ .ivu-input-group-prepend{
  background-color: rgb(56 , 56, 211)!important;
  border-color: rgb(56 , 56, 211)!important;
  color:#fff;
}
.levelConfig /deep/ .ivu-form-item{
  margin-bottom: 10px;
}
.target-score /deep/ .ivu-form-item-label::before {
  content: "*";
  display: inline-block;
  margin-right: 4px;
  line-height: 1;
  font-family: SimSun;
  font-size: 12px;
  color: #ed4014;
}
.form-gourp {
  border: 1px solid #DEE0E4;
  margin-bottom: 20px;
  position: relative;
  padding: 10px;
}
.form-gourp:last-child {
  margin-bottom: 0;
}
.form-title {
  color: #515a6e;
  font-weight: bold;
  position: absolute;
  top: -9px;
  left: 10px;
  background-color: #FFFFFF;
  display: inline-block;
  padding: 0 6px;
}

.dashboard-detail-body{
  display: flex;
  flex-direction:column;
}
.align-right{
  align-self: flex-end;
}


</style>
<style>
.deviceDrawer .ivu-drawer-body {
  overflow: inherit;
}
</style>
